<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="姓名">
                <a-input v-model="queryParam.name" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="queryUser()">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
                <div>{{ queryParam.id }}</div>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="add()">新建</a-button>
        </div>

        <a-table
          ref="table"
          :columns="columns"
          :row-key="record=>record.id"
          :data-source="data"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :title="`确认删除用户${record.name}吗?`"
                ok-text="Yes"
                cancel-text="No"
                @confirm="confirm(record)"
                @cancel="cancel"
                arrowPointAtCenter
              >
                <a>删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
        <add-user
          ref="createUser"
          :title="title"
          :visible="visible"
          :loading="confirmLoading"
          :model="mdl"
          @cancel="handleCancel"
          @ok="handleOk"
        />
      </div></a-card></page-header-wrapper></template>

  </page-header-wrapper>
</template>
<script>
import { userList, addUser, editUser, deleteUser } from '@/api/user'
import { message } from 'ant-design-vue'
import AddUser from './modules/AddUser'
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    sorter: true,
    width: '20%'
  },
  {
    title: 'name',
    dataIndex: 'name',
    width: '20%'
  }, {
    title: 'email',
    dataIndex: 'email',
    width: '20%'
  }, {
    title: '操作',
    dataIndex: 'action',
    width: '20%',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  inject: ['reload'],
  components: {
    AddUser
  },
  data () {
    return {
      data: [],
      columns,
      pagination: {
        pageSize: 10, // 默认每页显示数量
				showSizeChanger: true, // 显示可改变每页数量
				pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
				showTotal: total => `总共 ${total} 条` // 显示总数
      },
      loading: false,
      filter: [],
      queryParam: {},
      visible: false,
      confirmLoading: false,
      mdl: null,
      title: '', // 控制弹窗标题
      popconfirm_visible: false
    }
  },
  created () {},
  mounted () {
    this.getUserList()
  },
  methods: {
    getUserList (filter = {}) {
      console.log(this.$store.state)
      userList(filter)
        .then((res) => {
          if (res.code === 0) {
            const pagination = { ...this.pagination }
            pagination.total = res.data.total
            this.loading = false
            this.data = res.data.data
            this.pagination = pagination
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleTableChange (pagination, filters, sorter) {
      // 点击分页会触发方法
      console.log(pagination, filters, sorter)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      filters['page'] = pagination.current
      filters['page_size'] = pagination.pageSize
      this.pagination.pageSize = pagination.pageSize
      this.getUserList(filters)
    },
    reset () {
      // 重置表单方法
      this.queryParam = {}
      this.getUserList()
    },
    queryUser () {
      // 查询方法
      this.getUserList(this.queryParam)
    },
    add () {
      this.title = '新增用户'
      this.mdl = null
      this.visible = true
    },
    handleCancel () {
      this.visible = false
      const form = this.$refs.createUser.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleOk () {
      const form = this.$refs.createUser.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          const edit = values.id || false
          if (edit) {
              editUser(values).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.message)
              this.confirmLoading = false
            } else {
              userList(this.queryParam)
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              this.reload()
              this.$message.success('修改成功')
            }
          }).catch((err) => {
            console.log(err)
          })
          } else {
            addUser(values).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.message)
              this.confirmLoading = false
            } else {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              userList(this.queryParam)
              this.$message.success('新增成功')
            }
          }).catch((err) => {
            this.$message.error(err)
          })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleEdit (record) {
      console.log(record)
      this.title = '编辑用户'
      this.visible = true
      this.mdl = { ...record }
    },
    confirm (record) {
      deleteUser({ 'id': record.id }).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.message)
            } else {
              userList(this.queryParam)
              this.reload()
              message.success('删除成功')
            }
          }).catch((err) => {
            this.$message.error(err)
          })
    },
    cancel () {

    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
